<template>
  <fe-page :title="title" @back="goBack">
		<el-form ref="formRef" :model="form" :rules="rules" label-width="120px" v-loading="loading">
			<div class="title">基本信息</div>
			<el-row :gutter="48" class="form-box">
				<el-col :xs="24" :md="12" v-if="form.userId == undefined">
					<el-form-item label="账户:" prop="username">
						<el-input v-model="form.username" placeholder="请输入账户" clearable maxlength="50" />
					</el-form-item>
				</el-col>
				<el-col :xs="24" :md="12" v-if="form.userId == undefined">
					<el-form-item label="密码:" prop="password">
						<el-input v-model="form.password" placeholder="请输入密码" clearable maxlength="50" type="password" show-password />
					</el-form-item>
				</el-col>
				<el-col :xs="24" :md="12">
					<el-form-item label="姓名:" prop="nickname">
						<el-input v-model="form.nickname" placeholder="请输入姓名" clearable maxlength="50" />
					</el-form-item>
				</el-col>
				<el-col :xs="24" :md="12">
					<el-form-item label="所属部门:" prop="deptId">
						<el-tree-select
							v-model="form.deptId"
							:data="deptOptions"
							:props="{ value: 'deptId', label: 'deptName', children: 'children' }"
							value-key="deptId"
							placeholder="请选择所属部门"
							clearable
							check-strictly />
					</el-form-item>
				</el-col>
				<el-col :xs="24" :md="12">
					<el-form-item label="员工职务:" prop="extra.post">
						<el-select v-model="form.extra.post" placeholder="请选择员工职务" clearable>
							<el-option v-for="dict in sys_user_post" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :md="12">
					<el-form-item label="手机号码:" prop="phone">
						<el-input v-model="form.phone" placeholder="请输入手机号码" clearable maxlength="11" />
					</el-form-item>
				</el-col>
				<el-col :xs="24" :md="12">
					<el-form-item label="微信账号:" prop="wexin">
						<el-input v-model="form.extra.wexin" placeholder="请输入微信账号" clearable maxlength="50" />
					</el-form-item>
				</el-col>
				<el-col :xs="24" :md="12">
					<el-form-item label="邮箱地址:" prop="email">
						<el-input v-model="form.email" placeholder="请输入邮箱地址" clearable maxlength="50" />
					</el-form-item>
				</el-col>
				<el-col :xs="24" :md="12">
					<el-form-item label="出生日期:" prop="birthday">
						<el-date-picker v-model="form.extra.birthday" type="date" value-format="YYYY-MM-DD" placeholder="请选择出生日期" style="width: 100%;" />
					</el-form-item>
				</el-col>
				<el-col :xs="24" :md="12">
					<el-form-item label="性别:" prop="gender">
						<el-radio-group v-model="form.gender">
							<el-radio v-for="dict in sys_user_sex" :key="dict.value" :value="JSON.parse(dict.value)">{{ dict.label }}</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :md="12">
					<el-form-item label="角色:" prop="roleIds">
						<el-select v-model="form.roleIds" multiple placeholder="请选择角色">
							<el-option v-for="item in roleOptions" :key="item.roleId" :label="item.roleName" :value="item.roleId"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :md="12">
					<el-form-item label="状态:">
						<el-radio-group v-model="form.disable">
							<el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="JSON.parse(dict.value)">{{ dict.label }}</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
			</el-row>
			<div class="title">详细信息</div>
			<el-row :gutter="48" class="form-box">
				<el-col :xs="24" :md="12">
					<el-form-item label="籍贯:" prop="domicile">
						<el-input v-model="form.extra.domicile" placeholder="请输入籍贯" clearable maxlength="50" />
					</el-form-item>
				</el-col>
				<el-col :xs="24" :md="12">
					<el-form-item label="学历:" prop="education">
						<el-select v-model="form.extra.education" placeholder="请选择学历" clearable>
							<el-option v-for="dict in sys_user_education" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :md="12">
					<el-form-item label="专业:" prop="major">
						<el-input v-model="form.extra.major" placeholder="请输入专业" clearable maxlength="50" />
					</el-form-item>
				</el-col>
				<el-col :xs="24" :md="12">
					<el-form-item label="毕业院校:" prop="school">
						<el-input v-model="form.extra.school" placeholder="请输入毕业院校" clearable maxlength="50" />
					</el-form-item>
				</el-col>
				<el-col :xs="24" :md="12">
					<el-form-item label="毕业时间:" prop="graduationTime">
						<el-date-picker v-model="form.extra.graduationTime" type="date" value-format="YYYY-MM-DD" placeholder="请选择毕业时间" style="width: 100%;" />
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="个人简介:">
						<el-input v-model="form.remark" type="textarea" placeholder="请输入个人简介" :rows="3" maxlength="300" show-word-limit></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #foot>
			<el-button type="primary" @click="submitForm" :loading="loading">确 定</el-button>
		</template>
  </fe-page>
</template>

<script setup name="UserAdd">
import { getUser, addUser, updateUser } from "@/api/system/user"
import { listDept } from "@/api/system/dept"
import { listRole } from "@/api/system/role"

const route = useRoute()
const { proxy } = getCurrentInstance()
const { sys_normal_disable, sys_user_post, sys_user_sex, sys_user_education } = proxy.useDict("sys_normal_disable", "sys_user_post", "sys_user_sex", "sys_user_education")

const loading = ref(false)
const userId = route.params && route.params.userId
const title = userId? '编辑人员' : '新增人员'
const data = reactive({
  form: {
		userId: undefined,
    deptId: undefined,
		roleIds: [],
    username: undefined,
    nickname: undefined,
    password: undefined,
		gender: 0,
    phone: undefined,
		email: undefined,
    disable: false,
    remark: undefined,
		extra: {
			post: undefined,
			wexin: undefined,
			birthday: undefined,
			domicile: undefined,
			education: undefined,
			major: undefined,
			school: undefined,
			graduationTime: undefined
		}
	},
  rules: {
    username: [{ required: true, message: "账号不能为空", trigger: "blur" }, { min: 2, max: 50, message: "账号长度必须介于 2 和 50 之间", trigger: "blur" }],
    password: [{ min: 5, max: 20, message: "用户密码长度必须介于 5 和 20 之间", trigger: "blur" }, { pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" }],
		nickname: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
		deptId: [{ required: true, message: "所属部门不能为空", trigger: ["blur", "change"] }],
		'extra.post': [{ required: true, message: "员工职务不能为空", trigger: ["blur", "change"] }],
    phone: [{ required: true, message: "手机号码不能为空", trigger: "blur" }, { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }],
		email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
		roleIds: [{ type: "array", required: true, message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
  }
})

const { form, rules } = toRefs(data)
const deptOptions = ref([])
const roleOptions = ref([])

function getInfo() {
	if(!userId) return
	loading.value = true
	getUser(userId).then(response => {
		loading.value = false
		let result = response.result || {}
    form.value = result
  })
}

function getDeptTree() {
  return listDept({ size: -1, disable: false }).then(response => {
    const result = response.result || {}
    let data = proxy.handleTree(result.records, "deptId")
    deptOptions.value = data
  })
}

function getRoleList() {
  listRole({ size: -1, disable: false }).then(response => {
    const result = response.result || {}
    roleOptions.value = result.records || []
  })
}

function submitForm() {
  proxy.$refs["formRef"].validate(valid => {
    if (valid) {
			loading.value = true
      if (form.value.userId != undefined) {
        updateUser(form.value).then(response => {
					loading.value = false
          proxy.$modal.msgSuccess("编辑成功")
          goBack()
        }).catch(() => loading.value = false)
      } else {
        addUser(form.value).then(response => {
					loading.value = false
          proxy.$modal.msgSuccess("新增成功")
          goBack()
        }).catch(() => loading.value = false)
      }
    }
  })
}

function goBack() {
  const obj = { path: "/system/user", query: { t: Date.now(), current: route.query.current } }
  proxy.$tab.closeOpenPage(obj)
}

getInfo()
getDeptTree()
getRoleList()
</script>

<style lang="scss" scoped>
.title{
	margin-bottom: 16px;
	padding-left: 8px;
	font-weight: 600;
	font-size: var(--el-font-size-medium);
	position: relative;
	&::before{
		content: '';
		position: absolute;
		left: 0;
		top: 10%;
		width: 4px;
		height: 80%;
		background-color: var(--el-color-primary);
	}
}
.form-box{
	margin: 0 auto !important;
	max-width: 1400px;
}
</style>